<template>
  <div class="attach-viewer-video">
    <div id="vs" ref="vs"></div>
  </div>
</template>
<script>
import Player from "xgplayer/dist/simple_player";
import volume from "xgplayer/dist/controls/volume";
import playbackRate from "xgplayer/dist/controls/playbackRate";

export default {
  name: "AttachViewerVideo",
  props: ["videoUrl", "seekTime"],
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    console.log("位置" + this.seekTime);
    this.$nextTick(() => {
      this.player = new Player({
        el: this.$refs.vs,
        url: this.videoUrl,
        controlPlugins: [volume, playbackRate],
        playsinline: true,
        height: 420,
        width: 660,
        playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
      });
      this.player.on("play", () => {
        this.player.currentTime = this.seekTime;
        this.$emit("onVideoPlay");
      });
    });
  },
  methods: {
    getMediaCurrentTime() {
      return Math.floor(this.player.currentTime);
    },
  },
  watch: {
    videoUrl(n, o) {
      console.log(n, o);
    },
  },
};
</script>
<style scoped>
#vs {
  width: 300px;
  height: 200px;
}
</style>
